<template>
  <div class="_wz_dataImportTemp">
    <Card dis-hover >
      <p slot="title">{{title}}</p>
      <div slot="extra">
        <span style="color: #2d8cf0;cursor: pointer;" @click="downloadImportTemplate(softlinks)">下载导入模板</span>
      </div>
      <Form ref="dataForm" :model="dataForm" label-position="right" :label-width="100" :rules="dataValidate">
        <FormItem label="运输企业" prop="deptUuid">
          <i-select v-model="dataForm.deptUuid" filterable placeholder="请选择运输企业" clearable :transfer="true" :label-in-value="true" @on-change='dataForm.deptName = $event'>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="选择文件">
          <Upload :before-upload="vehicleUpload" action="">
            <Button type="primary" icon="ios-cloud-upload-outline">请选择<span style="margin: 0 5px;">xls</span>文件</Button>
            {{uploadData.name}}
          </Upload>
        </FormItem>
        <div class="demo-drawer-footer" style="text-align: left;">
          <FormItem style="margin: 0;">
            <Button type="primary" @click="formSubmit('dataForm')">上传</Button>
          </FormItem>
        </div>
      </Form>
    </Card>

  </div>
</template>
<script>
  export default {
    props: ['subDeptList','title','ajaxUrl','softlinks'],//接收来自父组件的数据
    data() {
      return {
        dataValidate: {//正则
          deptUuid: [
            {required: true, message: '请选择运输企业', trigger: 'blur'}
          ],
        },
        dataForm: {},//数据
        uploadData: {
          data: null,
          name: ''
        },
      }
    },
    computed: {//计算属性

    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法
      //选择文件
      vehicleUpload(file) {
        let that = this;
        //判断文件类型
        let type = file.name.substr((file.name.lastIndexOf(".") + 1));
        if (type == "XLSX" || type == "xlsx" || type == "XLS" || type == "xls") {//xls
          that.uploadData = {
            data: file,
            name: file.name
          }
        } else {
          that.$Message.error('您上传的文件类型不匹配');
        }
        return false;
      },
      //提交
      formSubmit(data) {
        let that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用
            let obj = that.dataForm;
            let formData = new FormData();
            if (!!!that.uploadData.data) {
              that.$Message.error('请选择上传文件');
              return false;
            } else {
              formData.append('uploadMultipartFile', that.uploadData.data);
            }
            //上传前 提醒
            that.$Modal.confirm({
              title: '上传提醒',
              content: '确定要往' + obj.deptName.label + "上传数据",
              onOk: () => {
                for (let key in obj) {
                  if (!!obj[key] && obj[key] != 'null') {
                    formData.append(key, obj[key]);
                  }
                }
                that.axios.post(that.apiUrl[that.ajaxUrl], formData, that.public.parameterUploadProgress(that)).then(res => {
                  that.$Spin.hide();

                  if (!!res) {
                    if (!!res.data.data && res.data.data.length > 0) {
                      that.$Message.error({
                        content: "上传失败,5秒后自动下载失败数据",
                        duration: 5,
                        onClose: function () {
                          window.open(that.apiUrl.imgUrl + '/' + res.data.data)
                        }
                      });
                    } else {
                      that.$Message.success("保存成功");
                    }


                    that.uploadData = {
                      data: null,
                      name: ''
                    };

                  }
                }).catch(err => {
                  console.log('失败', err);
                })
              },
              onCancel: () => {
                //点击取消
              }
            });
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },
      //下载导入模板
      downloadImportTemplate(data) {
        window.open(this.apiUrl.imgUrl + data)
      }

    },
    watch: {//监听

    },

    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_dataImportTemp {
    height: 100%;


    .ivu-card-body {
      /*height: calc(100% - 51px);*/
      padding-bottom: 55px;
    }
  }
</style>
